<template>
  <view class="cardstyle" :style="{'background-color': bgColor}">
	  <view class="borderbox">
    <slot name="header"></slot>
    <view class="titlebox" >
      <view class="imgbox" v-if="mode === 2" >
        <image 
          :src="showImage" 
          style="height: 70px; width: 100px;" 
          @error="handleImageException()"
        />
      </view>
      <view class="multi-imgbox" v-if="mode === 3">
        <image 
          v-for="(img, idx) in images" 
          :key="idx"
          :src="getMultiImageUrl(img, idx)"
          @error="() => handleMultiImageError(idx)"
          style="height:60px; width:60px;margin-right:5px;"
        />
      </view>
      <view class="title-text" >
        <text>{{ title }}</text>
      </view>
    </view>
    <view class="tipsbox">
      <text v-if="isTop" style="color: #f00; padding-right: 8px; font-weight: 600;">置顶</text>
      <text style="color: darkgrey ; padding-right: 8px;">{{ author }}</text>
      <text style="color: darkgrey;">{{ comments }}评</text>
      <view class="time" style="flex: 1; display: flex; justify-content: flex-end;">
        <text>{{ time }}</text>
      </view>
    </view>
    <slot name="tips"></slot>
    <slot name="footer"></slot>
  </view>
  </view>
</template>
<script>
export default {
  name: "cardViewText",
  props: {
    bgColor: {
      type: String,
      default: '#fff'
    },
    title: {
      type: String,
      default: "新闻标题",
      required: true
    },
    isTop: {
      type: Boolean,
      default: false,
      required: true
    },
    author: {
      type: String,
      default: "来源",
      required: true
    },
    comments: {
      type: Number,
      default: 0,
      required: true
    },
    time: {
      type: String,
      default: "2025.1.1"
    },
    images: {
      type: Array,
      default: () => []
    },
    mode: {
      type: Number,
      default: 1,
      validator: (val) => [1, 2, 3].includes(val)
    },
    imagetest: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      defaultPic: "/static/images/default.png",
      failPic: "/static/images/fail.png",       
      imageError: false,                       
      multiImageErrors: []                     
    };
  },
  computed: {
    showImage() {
      if (this.mode === 2 && this.images[0] && !this.imageError) {
        return this.images[0];
      }
      if (this.mode === 2 && this.imageError) {
        return this.failPic;
      }
      return this.defaultPic;
    }
  },
  methods: {
    handleImageException() {
      this.imageError = true;
    },
    handleMultiImageError(idx) {
      this.$set(this.multiImageErrors, idx, true);
    },
    getMultiImageUrl(img, idx) {
      return this.multiImageErrors[idx] ? this.failPic : (img || this.defaultPic);
    }
  }
};
</script>
<style scoped>
.cardstyle {
  border-radius: 8px;
  padding: 8px;
  margin: 8px 0;

}
.borderbox{
	border-bottom: 1px solid #f5f5f5;
	padding-bottom: 10px;
}
.titlebox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  
}
.imgbox {
  display: flex;
  align-items: center;
  
}
.multi-imgbox {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  
}
.title-text {
  font-size: 17px;
  font-weight: 500;
  flex: 1;
  
}
.tipsbox {
  font-size: 15px;
  font-weight: 540;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5px;
  
}
.time {
  color: darkgray;
  
}
</style>